//增删改查
const arr = JSON.parse(localStorage.getItem('information')) || []
//获取新增按钮
const addObj = document.querySelector('.btn')
//注册点击事件，新增
addObj.addEventListener('click', function () {
    const uname = document.querySelector('#name')
    const score = document.querySelector('#score')
    const money = document.querySelector('#money')
    if (uname.value.length === 0 || score.value.length === 0 || money.value.length === 0) return alert('请输入数据')
    const obj = {
        uname: uname.value,
        score: score.value,
        money: money.value
    }
    arr.push(obj)
    console.log(arr);
    uname.value = ''
    score.value = ''
    money.value = ''
    localStorage.setItem('information', JSON.stringify(arr))
    render()
})

//渲染
const listObj = document.querySelector('#list')
function render() {
    const newArr = arr.map((ele, index) => {
        return `
            <div class="one">
                    <span class="item">
                    <span class="info">${ele.uname}</span>
                    <input type="text" class="ipt" value='${ele.uname}'>
                    </span>
                    <span class="item">
                    <span class="info">${ele.score}</span>
                    <input type="number" class="ipt" value='${ele.score}'>
                    </span>
                    <span class="item">
                    <span class="info">${ele.money}</span>
                    <input type="number" class="ipt" value='${ele.money}'>
                    </span>
                    <span class="item">
                    <i class="upd" data-index=${index}></i>
                    <i class="del"data-index=${index}></i>
                    <i class="yes"data-index=${index}></i>
                    <i class="no"></i>
                    </span>
            </div>
                `
    })
    listObj.innerHTML = newArr.join('')
    chartOne()
    chartTwo()
}
render()

//事件委托点击事件
let mode = false
listObj.addEventListener('click', function (e) {
    const oneObj = document.querySelectorAll('.one')
    const id = e.target.dataset.index
    //修改
    if (e.target.className === 'upd') {
        if (mode) return alert('请完成编辑')
        mode = true
        // document.querySelector('.one').classList.add('editMode')
        oneObj[id].classList.add('editMode')
        const iptObj = oneObj[id].querySelectorAll('.ipt')

    }
    //修改完成
    if (e.target.className === 'yes') {
        mode = false
        const itemAll = oneObj[id].querySelectorAll('.ipt')
        // let { uname, score, money } = arr[id]
        arr[id].uname = itemAll[0].value
        arr[id].score = itemAll[1].value
        arr[id].money = itemAll[2].value
        localStorage.setItem('information', JSON.stringify(arr))
        render()
        // console.log(arr);
        // oneObj[id].classList.remove('editMode')
    }

    //取消修改
    if (e.target.className === 'no') {
        mode = false
        render()
    }

    if (e.target.className === 'del') {
        if (mode) return alert('请完成编辑')
        if (confirm('确定删除吗？')) {
            arr.splice(id, 1)
            render()
            localStorage.setItem('information', JSON.stringify(arr))
        }
    }
})

// console.log(arr);


function chartOne() {
    //图
    const data = []
    const date = []
    for (let i = 0; i < arr.length; i++) {
        console.log(arr[i].uname);
        data.push(arr[i].uname)
    }
    for (let i = 0; i < arr.length; i++) {
        console.log(arr[i].score);
        date.push(arr[i].score)
    }
    const myChart = echarts.init($('#up')[0])
    const option = {
        title: {
            text: "评分图标",
            left: 0,
            top: 10,
            textStyle: {
                fontSize: 20,
                color: "#ffffff"
            },
            show: true
        },
        // 柱子颜色
        itemStyle: {
            color: '#1e90ff'
        },
        // 鼠标经过柱子颜色
        emphasis: {
            itemStyle: {
                color: '#1e90ff'
            }
        },
        // 工具提示隐藏
        tooltip: {
            show: false
        },
        xAxis: {
            type: 'category',
            data: data,
            // 刻度设置
            axisTick: {
                alignWithLabel: true,
                show: true,
                alignWithLabel: false
            },
            // 文字
            axisLabel: {
                // alignWithLabel: true,
                color: '#fff'
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: "#fff"
                }
            },
        },
        yAxis: {
            type: 'value',
            // 刻度设置
            axisTick: {
                show: true
            },
            // 文字
            axisLabel: {
                color: '#fff'
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: "#fff"
                }
            },
            splitLine: {
                show: false
            }
        },
        series: [
            {
                data: date,
                type: 'bar'
            }
        ],
        // 图表边界控制
        grid: {
            // 距离 上右下左 的距离
            top: '15%',
            right: '1%',
            bottom: '3%',
            left: '2%',
            // 是否包含文本
            containLabel: true,
            // 显示边框
            show: false
        },
    };
    myChart.setOption(option)
    window.addEventListener('resize', () => {
        myChart.resize()
    })
}
chartOne()

function chartTwo() {
    const data = []
    const date = []
    for (let i = 0; i < arr.length; i++) {
        console.log(arr[i].uname);
        data.push(arr[i].uname)
    }
    for (let i = 0; i < arr.length; i++) {
        console.log(arr[i].money);
        date.push(arr[i].money)
    }
    const myChart = echarts.init($('#down')[0])
    const option = {
        title: {
            text: "薪资图示",
            left: 0,
            top: 10,
            textStyle: {
                fontSize: 20,
                color: "#ffffff"
            },
            show: true
        },
        // 柱子颜色
        itemStyle: {
            color: '#1e90ff'
        },
        // 鼠标经过柱子颜色
        emphasis: {
            itemStyle: {
                color: '#1e90ff'
            }
        },
        // 工具提示隐藏
        tooltip: {
            show: false
        },
        xAxis: {
            type: 'category',
            data: data,
            // 刻度设置
            axisTick: {
                alignWithLabel: true,
                show: true,
                alignWithLabel: false
            },
            // 文字
            axisLabel: {
                // alignWithLabel: true,
                color: '#fff'
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: "#fff"
                }
            },
        },
        yAxis: {
            type: 'value',
            // 刻度设置
            axisTick: {
                show: true
            },
            // 文字
            axisLabel: {
                color: '#fff'
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: "#fff"
                }
            },
            splitLine: {
                show: false
            }
        },
         // 图表边界控制
         grid: {
            // 距离 上右下左 的距离
            top: '15%',
            right: '1%',
            bottom: '3%',
            left: '2%',
            // 是否包含文本
            containLabel: true,
            // 显示边框
            show: false
        },
        series: [
            {
                data: date,
                type: 'line'
            }
        ]
    };
    myChart.setOption(option)
    window.addEventListener('resize', () => {
        myChart.resize()
    })
}
chartTwo()

